<template>
	<view class="pagebox flex-column pd30">
		<view class="selbox flex-row-center mb10">
			<picker @change="bindPickerChange" :value="obj.typeidx" :range="obj.types">
				<view class="uni-input">{{obj.types[obj.typeidx]}}</view>
			</picker>
			<image style="width: 26rpx;height: 26rpx;margin-left: 10rpx;" src="../static/27.png" mode="aspectFill"></image>
		</view>
		<view class="w100 flex1 overflow-y">
			<view class="miniitem flex-row" v-for="(v,i) in obj.list" :key="i" @click="go(v)">
				<view class="spot flex-center" v-if="v.cou>0">{{v.cou||0}}</view>
				<view class="headbox">
					<image :src="v.last.head?`${proxy.$c.fileHost}head/${v.last.head}`:`../static/34.png`" mode=""></image>
				</view>
				<view class="w100 flex-column">
					<view class="w100 flex-row-center ju-between">
						<text class="username weight" v-if="v.last">{{v.last.name||'麦丝儿'}}</text>
						<text class="intime">{{v.intime||''}}</text>
					</view>
					<text class="desc mt5 mb5" v-if="v.name">{{v.name||'江苏瑞佳丝网制品有限公司'}}</text>
					<text class="title" v-if="v.last.msg&&v.last.msg.type=='text'">{{v.last.msg.msg||''}}(最新回复)</text>
				</view>
			</view>
			<view v-if="!obj.list.length" class="nodata">暂无历史询盘</view>
		</view>
	</view>
</template>

<script setup>
    import { reactive, getCurrentInstance,onMounted,onUnmounted } from 'vue'
	import { onLoad,onShow,onTabItemTap,onReachBottom,onPullDownRefresh,onPageScroll,onUnload,onHide } from '@dcloudio/uni-app';
	import dayjs from 'dayjs'
    let { proxy } = getCurrentInstance()
	
	let obj = reactive({
		req: {
		  "currentpage": 1,
		  "pagesize": 10000
		},
		types: ['未读','已读','全部'],
		typeidx: 2,
		list: [],
		local_list: [],
		Interval: null
	})
	
	onShow(()=>{
		initInterval()
	})
	
	onHide(()=>{
		clearInterval(obj.Interval)
		obj.Interval = null
	})
	
	onUnload(()=>{
		clearInterval(obj.Interval)
		obj.Interval = null
	})
	
	const initInterval=()=>{
		if(obj.Interval){
			clearInterval(obj.Interval)
			obj.Interval = null
		}
		init()
		obj.Interval = setInterval(()=>{
			init()
		},2000)
	}
	
	const init=()=>{
		proxy.$reQuest.post('mp/product/inquiry/room',obj.req,{token: true},).then(d=>{
			if(d.success){
				obj.local_list = d.msg.list||[]
				obj.local_list.map(e=>{
					e.last.msg = e.last.msg?JSON.parse(e.last.msg):null
				})
				bindPickerChange({detail:{value:obj.typeidx}})
			}else{obj.list=[]}
		}).catch(err=>{obj.list=[]})
	}
	
	const bindPickerChange=(e)=>{
		obj.typeidx = e.detail.value
		obj.list = obj.local_list.filter(e=>{
			if(obj.typeidx==2){
				return !!e.intime
			}else if(obj.typeidx==1){
				return !e.cou
			}else{
				return !!e.cou
			}
		})
	}
	
	const go=(v)=>{
		proxy.$c.go_url(`/pages/customer/chat${proxy.$c.JSONToUrl({
			company_id: v.company_id,
			room_id: v.room_id,
			identity: 'user',
		})}`)
		return
		 proxy.$reQuest.post('mp/product/inquiry',{product_id:v.product_id},{token: true},).then(d=>{
			 if(d.success&&d.msg){
				 proxy.$c.go_url(`/pages/customer/chat${proxy.$c.JSONToUrl({
					 ...d.msg,
					 identity: 'user',
					 product_id: v.product_id,
				 })}`)
			 }else{
				uni.showToast({title: '询盘失败！',icon: 'none'}) 
			 }
		 }).catch(err=>{
			 uni.showToast({title: '询盘失败！',icon: 'none'})
		 })
	}
</script>

<style lang="scss" scoped>
.pagebox{
	width: 100vw;height: 100vh;
	.selbox{
		padding: 10rpx 30rpx;
		box-sizing: border-box;
		margin-bottom: 10rpx;
		width: fit-content;
		border: solid 1rpx #f0f0f0;
		border-radius: 100rpx;
	}
	.miniitem{
		position: relative;
		padding: 30rpx 0;border-bottom: solid 1rpx #f0f0f0;box-sizing: border-box;
		.spot{position: absolute;right: 0rpx;top: 80rpx;z-index: 1;width: 10rpx;height: 10rpx;padding: 10rpx;border-radius: 50%;background-color: red;color: #fff;font-size: 22rpx;}
		.headbox{min-width: 100rpx;height: 100rpx;border-radius: 100rpx; overflow: hidden; margin-right: 20rpx; image{width: 100rpx;height: 100rpx;}}
		.title{font-size: 26rpx;color: #666;}
		.desc{font-size: 26rpx;color: #666;}
		.username{font-size: 30rpx;color: #000;}
		.intime{font-size: 24rpx;color: #999;}
	}
	// .miniitem:last-child{border-bottom: none;}
	.nodata{width: 100vw;height: 100vh;text-align: center;line-height: 100vh;font-size: 22rpx;color: #999;}
}
</style>
